<template>
    <el-card shadow="never" style="max-height: 700px; overflow: auto">
        <el-form ref="form" :model="form" :rules="rules" label-width="90px" :disabled="disabled">
            <el-form-item label="尺码编号" prop="brand_id">
                <el-input v-model="form.brand_title" value="bra01" placeholder="" :rows="4" />
            </el-form-item>
            <el-form-item label="Color" prop="color">
                <el-row>
                    <el-col :span="18">
                        <el-select
                            style="width: 100%;"
                            v-model="form.colors"
                            multiple
                            filterable
                            default-first-option
                            @change="change"
                            placeholder="请选择颜色">
                            <el-option
                            v-for="item in options"
                            :key="item"
                            :label="item"
                            :value="item">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="6">
                        <el-button style="margin-left:5px;" type="primary" size="mini" @click="color_yes">全选 </el-button>
                        <el-button type="primary" size="mini" @click="color_no">全部取消 </el-button>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="Size" prop="size">
                <el-row>
                    <el-col :span="18">
                        <el-select
                            style="width: 100%;"
                            v-model="form.size"
                            multiple
                            filterable
                            default-first-option
                            @change="change_size"
                            placeholder="请选择Size">
                            <el-option
                            v-for="item in sizes"
                            :key="item"
                            :label="item"
                            :value="item">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="6">
                        <el-button style="margin-left:5px;" type="primary" size="mini" @click="size_yes">全选 </el-button>
                        <el-button type="primary" size="mini" @click="size_no">全部取消 </el-button>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="Cup" prop="cup">
                <el-row>
                    <el-col :span="18">
                        <el-select
                            style="width: 100%;"
                            v-model="form.cup"
                            multiple
                            filterable
                            default-first-option
                            @change="change_cup"
                            placeholder="请选择Cup">
                            <el-option
                            v-for="item in cups"
                            :key="item"
                            :label="item"
                            :value="item">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="6">
                        <el-button style="margin-left:5px;" type="primary" size="mini" @click="cup_yes">全选 </el-button>
                        <el-button type="primary" size="mini" @click="cup_no">全部取消 </el-button>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="拆分产品:" prop="switch">
                <el-switch v-model="form.switch" active-color="#13ce66" :active-value="1" :inactive-value="0" active-text="按颜色拆分成多个产品" inactive-text="单件产品" @change="change_switch"> </el-switch>
            </el-form-item>
            <el-form-item label="单件数量" prop="quantity">
                <el-input-number v-model="form.quantity" controls-position="right" :min="0" :max="10000" />
            </el-form-item>   
            <el-table v-if="conversion_table_state3"
                :data="tableData_size_chart"
                border
                height="200"
                style="width: 100%">
                <el-table-column
                    prop="cup"
                    label="映射前"
                    >
                </el-table-column>
                <el-table-column
                    prop="title"
                    label="映射后"
                    >
                </el-table-column>
            </el-table>
            <el-form-item>         
            </el-form-item>
            <el-form-item width="400" label="尺码转换" prop="sizecup">
                <el-select v-model="form.sizecup" @change="change_sizecup" placeholder="请选择" clearable >
                    <el-option
                        v-for="item in sizecups"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id">
                        <span style="float: left">{{ item.title }}</span>
                        <!-- <span style="float: right; color: #8492a6; font-size: 13px">{{ item.title }}</span> -->
                    </el-option>
                </el-select>
                <el-button type="primary" v-if="conversion_table_state" @click="conversion_table">尺码转换表预览 </el-button>
                <el-button type="primary" v-if="conversion_table_state2" @click="conversion_table_close">关闭尺码转换表预览 </el-button>
            </el-form-item>

            <el-row>
                <el-col :span="16">
                    <el-table
                        :data="tableData"
                        border
                        height="200"
                        style="width: 100%"
                        @selection-change="handleSelectionChange"
                        >
                        <el-table-column
                            type="selection"
                            width="55">
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="多属性"
                            >
                        </el-table-column>
                        <el-table-column
                            prop="sku"
                            label="SKU"
                            >
                        </el-table-column>
                        <el-table-column
                            prop="option1"
                            label="option1"
                            >
                        </el-table-column>
                        <el-table-column
                            prop="option2"
                            label="option2"
                            >
                        </el-table-column>
                        <el-table-column
                            prop="option3"
                            label="option3"
                            >
                        </el-table-column>
                    </el-table>
                </el-col>
                <el-col :span="8">
                    <el-table
                        :data="tableData2"
                        border
                        height="200"
                        style="width: 100%"
                        @selection-change="handleSelectionChange2"
                        >
                        <el-table-column
                            type="selection"
                            width="55">
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="移除的多属性"
                            >
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>

            <el-form-item>

            </el-form-item>
            <el-form-item>
                <el-button type="info" @click="delete_sku">批量移除SKU </el-button>
                <el-button type="info" @click="add_sku">批量恢复SKU </el-button>
                <el-button type="primary" @click="generate_sku_realtime">生成SKU </el-button>
                <el-button type="primary" @click="submitForms">暂存 </el-button>
            </el-form-item>

            <el-form-item label="新店铺" prop="site_name">
            <SelectPage v-model="form.site_id" :url="'/admin/site/selectPage'" show_field="site_name" placeholder="请选择新店铺" query_field="site_name" :multiple="false" />
            </el-form-item>
            
            <el-form-item>
                <el-button v-loading.fullscreen.lock="fullscreenLoading" type="primary" @click="export_store">导出到新店铺 </el-button>
            </el-form-item>

        </el-form>
    </el-card>
</template>

<script>
export default {
    name: 'EditSkuForm',
    props: {
        findFormData: {
            type: Object,
            default: {},
        },
        editFormParams: {
            type: Object,
            default: {},
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            rules: {},
            form: {},
            sku_name_two:[],
            sku_name_two2:[],
            conversion_table_state:true,
            conversion_table_state2:false,
            conversion_table_state3:false,
            sku_name_two_status:false,
            api: {
                get_excel: `/admin/index/get_excel`,
                product_to_shopify: `/admin/product/product_to_shopify`,
                sku_table_deal: `/admin/index/sku_table_deal`,
                get_excel_data: `/admin/index/get_excel_data`,
            },
            inputVisible: false,
            inputVisible2: false,
            inputValue: '',
            inputValue2: '',
            tableData: [],
            tableData_size_chart: [],
            options: [],
            sizecups: [],
            sizes: [],
            cups: [],
            new_sku: [],
            sites: [],

            sku_name_option1: [],
            sku_name_option2: [],
            sku_name_option3: [],
            multipleSelection: [],
            multipleSelection2: [],
            tableData2: [],
            fullscreenLoading: false
        }
    },
    watch: {
        findFormData: {
            handler(nval) {
                if (JSON.stringify(nval) != '{}') {
                    // this.$nextTick(() => {
                        this.form = nval
                        this.sizes = nval.sizes
                        this.cups = nval.cups
                        this.options = nval.color
                        this.sizecups = nval.excel
                    // })
                    if(nval.sku_table == '' || nval.sku_table == null){
                        if(this.sku_name_two_status == false){
                            this.new_sku = []
                            this.sku_name_two = []
                            this.tableData = []
                            this.sku_name_option1 = []
                            this.sku_name_option2 = []
                            this.sku_name_option3 = []
                        }
                    }else{
                        if(this.sku_name_two_status == false){
                            this.new_sku = nval.sku_table.sku
                            this.sku_name_two = nval.sku_table.sku_name
                            this.tableData = nval.sku_table.tableData
                            this.tableData2 = nval.remove_sku
                            this.sku_name_option1 = nval.sku_table.option1
                            this.sku_name_option2 = nval.sku_table.option2
                            this.sku_name_option3 = nval.sku_table.option3
                            this.sku_name_two2 = nval.sku_table.sku_name
                        }
                    }
                }
            },
            immediate: true,
            deep: false,
        },
        
    },
    methods: {
        // 取消按钮
        cancel() {
            this.$emit('editSkuFormCancel')
        },

        submitForm() {
            this.$refs['form'].validate((valid, obj) => {
                if (valid) {
                    this.$emit('submitForm', this.form)
                }
            })
        },

        async export_store() {
            if(this.new_sku == '' || this.sku_name_two == ''){
                this.$message.error('请生成SKU');
                return false;
            }
            if(this.form.site_id == '' || this.form.site_id == null){
                this.$message.error('请选择要导入的店铺');
                return false;
            }
            this.$confirm('此操作将把产品导入到新店铺, 导入过程中请耐心等待?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.export_store2();
                }).catch(() => {
                this.$message({
                type: 'info',
                message: '已取消'
                });          
            });
        },

        conversion_table(){
            if(this.form.sizecup == ""){
                this.$message.error('请选择尺码转换方案');
                return false;
            }
            this.conversion_table_state = false
            this.conversion_table_state2 = true
            this.conversion_table_state3 = true
            this.conversion_table_data()
        },
        conversion_table_close(){
            this.conversion_table_state = true
            this.conversion_table_state2 = false
            this.conversion_table_state3 = false
        },

        async conversion_table_data(){
            let response = await this.request.post(this.api.get_excel_data, {  
                    excel_id: this.form.sizecup,
                })
            if(response.code == 1){
                this.tableData_size_chart = response.data
            }
        },

        async export_store2(){
            this.fullscreenLoading = true;
            //导出时暂存一下
            // this.submitForms2();
            let response = await this.request.post(this.api.product_to_shopify, {  
                    brand_title: this.form.brand_title,
                    site_id: this.form.site_id,
                    product_id: this.form.product_id,
                    color: this.form.colors,
                    size: this.form.size,
                    cup: this.form.cup,
                    switch: this.form.switch,
                    tableData: this.tableData,
                })
            this.fullscreenLoading = false;
            if(response.code == 1){
                if(response.data == ''){
                    this.$message.error('API报错:'+response.msg);
                }else{
                    this.$message.success('导入成功,新增的产品ID为'+response.data);
                    this.$emit('editSkuFormCancel')
                }
            }
        },

        async submitForms2() {
            await this.request.post(this.api.sku_table_deal, {  
                    brand_title: this.form.brand_title,
                    color: JSON.stringify(this.form.colors),
                    size: JSON.stringify(this.form.size),
                    cup: JSON.stringify(this.form.cup),
                    excel: this.form.sizecup,
                    switch: this.form.switch,
                    quantity: this.form.quantity,
                    product_id: this.form.product_id,
                    sku_name: JSON.stringify(this.sku_name_two),
                    sku: JSON.stringify(this.new_sku),
                    option1: JSON.stringify(this.sku_name_option1),
                    option2: JSON.stringify(this.sku_name_option2),
                    option3: JSON.stringify(this.sku_name_option3),
                })
        },

        async submitForms() {
            if(this.new_sku == '' || this.sku_name_two == ''){
                this.$message.error('请生成SKU再保存');
            }else{
                let tableData3_array = [];
                for(let v =0;v<this.tableData2.length;v++){
                    tableData3_array.push(this.tableData2[v].name);
                }
                let response = await this.request.post(this.api.sku_table_deal, {  
                    brand_title: this.form.brand_title,
                    color: JSON.stringify(this.form.colors),
                    size: JSON.stringify(this.form.size),
                    cup: JSON.stringify(this.form.cup),
                    excel: this.form.sizecup,
                    switch: this.form.switch,
                    quantity: this.form.quantity,
                    product_id: this.form.product_id,
                    sku_name: JSON.stringify(this.sku_name_two2),
                    sku: JSON.stringify(this.new_sku),
                    option1: JSON.stringify(this.sku_name_option1),
                    option2: JSON.stringify(this.sku_name_option2),
                    option3: JSON.stringify(this.sku_name_option3),
                    remove_sku: JSON.stringify(tableData3_array),
                })
                if(response.code == 1){
                    this.$emit('submitSkuForm', this.form)
                }else{
                    this.$message.error(response.msg);
                }
            }
        },
        
        add_sku() {
            if(this.multipleSelection2.length == 0){
                this.$message.error('请选择要恢复的SKU');
                return false;
            }
            for(let i =0;i<this.tableData2.length;i++){
                for(let v =0;v<this.multipleSelection2.length;v++){
                    if(this.tableData2[i].name == this.multipleSelection2[v].name){
                        this.tableData2.splice(i, 1);
                    }
                }
            }
            this.generate_sku();
        },
        delete_sku() {
            if(this.multipleSelection.length == 0){
                this.$message.error('请选择要移除的SKU');
                return false;
            }
            
            for(let v =0;v<this.multipleSelection.length;v++){
                let tableData2_array = [];
                tableData2_array['name'] = this.multipleSelection[v].name;
                if(this.tableData2.length == 0){
                    this.tableData2 = [];
                }
                this.tableData2.push(tableData2_array);
            }
            this.generate_sku();
        },
        generate_sku_realtime() {
            this.generate_sku();
            this.generate_sku_realtime2();
        },
        // sku生成回显
        async generate_sku_realtime2() {
            if(this.sku_name_two == '' || this.form.colors == ''){
                this.$message.error('请填写尺码编号、颜色以及尺码转换方案');
            }else{
                this.sku_name_two.join(',')
                let response = await this.request.post(this.api.get_excel, {
                    sku_data: JSON.stringify(this.sku_name_two),
                    option1: JSON.stringify(this.sku_name_option1),
                    option2: JSON.stringify(this.sku_name_option2),
                    option3: JSON.stringify(this.sku_name_option3),
                    sku_name: JSON.stringify(this.sku_name_two2),
                    quantity: this.form.quantity,
                    excel_id: this.form.sizecup,
                    brand: this.form.brand_title,
                })
                this.new_sku =  response.data.new;
                this.tableData = response.data.skudata
            }
        },

        color_yes() {
            this.form.colors = this.options;
            this.generate_sku();
        },
        color_no() {
            this.form.colors = [];
            this.generate_sku();
        },
        size_yes() {
            this.form.size = this.sizes;
            this.generate_sku();
        },
        size_no() {
            this.form.size = [];
            this.generate_sku();
        },
        cup_yes() {
            this.form.cup = this.cups;
            this.generate_sku();
        },
        cup_no() {
            this.form.cup = [];
            this.generate_sku();
        },
        change(val) {
            this.form.colors = val;
            this.generate_sku();
        },
        change_size(val) {
            this.form.size = val;
            this.generate_sku();
        },
        change_switch(val) {
            if(val == 1){
                if(this.form.colors.length <= 1){
                    this.$message.error('请选择至少两种颜色');
                    this.form.switch = 0;
                    return false;
                }
            }
            if(val == 0){
                if(this.sku_name_option1.length>=100 && this.form.colors.length>1){
                    this.$message.success('属性超过100个,自动按颜色拆分成多个产品');
                    this.form.switch = 1;
                    return false;
                }
            }
        },
        change_cup(val) {
            this.form.cup = val;
            this.generate_sku();
        },
        change_sizecup(val) {
            this.form.sizecup = val;
            this.conversion_table_data()
        },
        generate_sku(){
            this.tableData = []
            this.sku_name_option1 = []
            this.sku_name_option2 = []
            this.sku_name_option3 = []

            this.sku_name_two = [];
            this.new_sku = [];

            let sku_name_array = [];
            let test_sku_name = [];
            let sku_name_one = [];
            let sku_name_one2 = [];

            let sku_name_option1 = [];
            let sku_name_option2 = [];
            let sku_name_option3 = [];

            if(this.form.size.length*this.form.cup.length>=100){
                this.$message.error('属性最多不能超过100个');
                return false;
            }
            if(this.form.size.length == 0){
                for(let i =0;i<this.form.colors.length;i++){
                        for(let v =0;v<this.form.cup.length;v++){
                            if(this.tableData2.length >= 1){
                                if(this.isStrInArray(this.form.colors[i]+' / '+this.form.cup[v],this.tableData2) == true){
                                    continue;
                                }
                            }
                            test_sku_name = [];
                            test_sku_name['name'] = this.form.colors[i]+' / '+this.form.cup[v];
                            test_sku_name['name_return'] = this.form.colors[i]+'-'+this.form.cup[v];
                            test_sku_name['sku'] = '';

                            test_sku_name['option1'] = this.form.colors[i];
                            test_sku_name['option2'] = '-';
                            test_sku_name['option3'] = this.form.cup[v];

                            sku_name_array = sku_name_array || [];
                            sku_name_one = sku_name_one || [];
                            sku_name_array.push(test_sku_name);
                            sku_name_one.push(test_sku_name['name_return']);
                            sku_name_one2.push(test_sku_name['name']);

                            sku_name_option1.push(test_sku_name['option1']);
                            sku_name_option2.push(test_sku_name['option2']);
                            sku_name_option3.push(test_sku_name['option3']);
                        }
                }
            }else if(this.form.cup.length == 0){
                for(let i =0;i<this.form.colors.length;i++){
                    for(let j =0;j<this.form.size.length;j++){
                            if(this.tableData2.length >= 1){
                                if(this.isStrInArray(this.form.colors[i]+' / '+this.form.size[j],this.tableData2) == true){
                                    continue;
                                }
                            }
                            test_sku_name = [];
                            test_sku_name['name'] = this.form.colors[i]+' / '+this.form.size[j];
                            test_sku_name['name_return'] = this.form.colors[i]+'-'+this.form.size[j];
                            test_sku_name['sku'] = '';

                            test_sku_name['option1'] = this.form.colors[i];
                            test_sku_name['option2'] = this.form.size[j];
                            test_sku_name['option3'] = '-';

                            sku_name_array = sku_name_array || [];
                            sku_name_one = sku_name_one || [];
                            sku_name_array.push(test_sku_name);
                            sku_name_one.push(test_sku_name['name_return']);
                            sku_name_one2.push(test_sku_name['name']);

                            sku_name_option1.push(test_sku_name['option1']);
                            sku_name_option2.push(test_sku_name['option2']);
                            sku_name_option3.push(test_sku_name['option3']);
                    }
                }
            }else{
                for(let i =0;i<this.form.colors.length;i++){
                    for(let j =0;j<this.form.size.length;j++){
                        for(let v =0;v<this.form.cup.length;v++){
                            if(this.tableData2.length >= 1){
                                if(this.isStrInArray(this.form.colors[i]+' / '+this.form.size[j]+' / '+this.form.cup[v],this.tableData2) == true){
                                    continue;
                                }
                            }
                            test_sku_name = [];
                            test_sku_name['name'] = this.form.colors[i]+' / '+this.form.size[j]+' / '+this.form.cup[v];
                            test_sku_name['name_return'] = this.form.colors[i]+'-'+this.form.size[j]+''+this.form.cup[v];
                            test_sku_name['sku'] = '';

                            test_sku_name['option1'] = this.form.colors[i];
                            test_sku_name['option2'] = this.form.size[j];
                            test_sku_name['option3'] = this.form.cup[v];

                            sku_name_array = sku_name_array || [];
                            sku_name_one = sku_name_one || [];
                            sku_name_array.push(test_sku_name);
                            sku_name_one.push(test_sku_name['name_return']);
                            sku_name_one2.push(test_sku_name['name']);

                            sku_name_option1.push(test_sku_name['option1']);
                            sku_name_option2.push(test_sku_name['option2']);
                            sku_name_option3.push(test_sku_name['option3']);
                        }
                    }
                }
            }
            
            if(sku_name_option1.length>=100 && this.form.colors.length>1){
                this.$message.success('属性超过100个,自动按颜色拆分成多个产品');
                this.form.switch = 1;
            }
            if(this.form.colors.length<=1){
                this.form.switch = 0;
            }
            this.tableData = sku_name_array;
            this.sku_name_two = sku_name_one;
            this.sku_name_two2 = sku_name_one2;
            this.sku_name_two_status = true;
            this.sku_name_option1 = sku_name_option1;
            this.sku_name_option2 = sku_name_option2;
            this.sku_name_option3 = sku_name_option3;
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleSelectionChange2(val) {
            this.multipleSelection2 = val;
        },
        // 表单重置
        reset() {
            this.resetForm('form')
        },
        isStrInArray(str, arr) {
            let n = arr.length;
            for (let i = 0; i < n; i++) {
                if (arr[i].name == str) {
                    return true;
                }
            }
            return false;
        },

    },
}
</script>
